<!--
 * @Author: luojiajun
 * @Email: company.kachun@gmail.com
 * @Date: 2021-06-30 11:38:33
 * @FilePath: /src/views/database/index.vue
 * @LastEditTime: 2021-07-17 11:42:34
 * @LastEditors: luojiajun
-->
<template>
    <div class="app-container app-height schedule">
        <div class="bg-white">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="clearfix">
                <el-form-item label="数据库名称" prop="dbName" class="float-left">
                    <el-input
                        v-model="ruleForm.dbName"
                        placeholder="请输入数据库名称"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="表名称" prop="tableName" class="float-left">
                    <el-input
                        v-model="ruleForm.tableName"
                        placeholder="请输入表名称"
                        clearable
                    ></el-input>
                </el-form-item>

                <el-form-item class="float-left btn">
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        size="mini"
                        @click="submitForm('ruleForm')"
                        >查询</el-button
                    >
                </el-form-item>
                <el-form-item class="float-left btn">
                    <el-button
                        type="primary"
                        size="mini"
                        @click="resetForm()"
                        >刷新</el-button
                    >
                </el-form-item>
            </el-form>

            <el-row>
                <el-col>
                    <database-directory-tree ref="tree" :rule-form="ruleForm" :root-node="Fnode" v-model="treeData" :loading="loading" @update="fetchData"></database-directory-tree>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { getDataTreeList } from "@/api/dataManagement/system/info.js";
import { getHeight } from "@/utils/zkComm";
import databaseDirectoryTree from "@/views/database/components/DatabaseDirectoryTree"
import mockJson from "@/views/database/components/mock.json"
import { guid } from "@/utils/zkComm"

export default {
    name: "Database",
    components: {
        databaseDirectoryTree
    },
    data() {
        return {
            loading: false,
            ruleForm: {
                pageNum: 1,
                pageSize: 30,
                dbName: "",
                tableName: "",
            },
            rules: {
                dbName: [{ required: true, message: "数据库名称不能为空", trigger: "blur" }],
                tableName: [{ required: true, message: "表名称不能为空", trigger: "blur" }],
            },
            tableList: [],
            totalNum: 0,
            mapHeight: undefined,
            pickerOptions: {},
            treeData: [],
            Fnode: {},
            mockJson: mockJson
        };
    },
    created() {
        this.fetchData()
    },
    mounted() {
        this.mapHeight = getHeight(true);
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.$refs.tree.handleQuery()
                }
            });
        },
        resetForm() {
            this.$refs.tree.handleQueryReset()
        },
        fetchData() {
            if (this.loading) return

            this.loading = true

            getDataTreeList()
                .then(res => {
                    if (res.code == 200) {
                        let params = JSON.parse(JSON.stringify(res.data.children))
                        let treeData = params
                        this.Fnode = Object.assign({}, {}, res.data)
                        delete this.Fnode.children
    
                        this.treeData = this.formatTreeData(treeData)
                    }
                    this.loading = false;
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        formatTreeData(treeData) {
            treeData.forEach((item, i) => {
                item.data.status = Number(item.data.status[0])
                item.uniqueid = guid()
                item = Object.assign({}, item, item.data)
                treeData[i] = item
                if (item.children.length > 0) {
                    return this.formatTreeData(item.children)
                }
            });
            return treeData;
        }
    }
};
</script>

<style lang="scss" scoped>
.app-container {
    padding: 20px;
}
.schedule ::v-deep {
    .el-form-item__label {
        text-align: right;
    }
}

::v-deep.el-form-item.btn {
   .el-form-item__content {
       margin-left: 16px !important;
   }
}
</style>
